<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
    <style>
        .loading{
            width: 70px;
            height: 70px;
            position: absolute;
            left: 50%;
            top: 200px;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>

<div id="contentDiv" >
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div>
            <div class="widget-body no-padding">
                <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                    <thead>
                    <tr>
                    </tr>
                    <tr>
                        <th>id</th>
                        <th>设备地点</th>
                        <th>设备名称</th>
                        <th>开关状态1</th>
                        <th>开关状态2</th>
                        <th>开关状态3</th>
                        <th>设备状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody style="position: relative;">
                    <img id="loadingImg" src="../../img/loading/loading.png"
                         class="layui-anim layui-anim-rotate layui-anim-loop loading"
                    >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
	var layer = layui.layer;
});
var userStatus = showDictSelect("status", "userStatus", true);

var pers = checkPermission();

$('#loadingImg').hide()

var example;
function init(){
	example =
    	$('#dt-table').DataTable({
        	"searching": false,
        	"processing": false,
        	"serverSide" : true,
        	"language": {
                "url": "/js/plugin/datatables/Chinese.lang"
            },
        	"ajax": {
        		"url" : "/device/iotList",
        		"type":"get",
        		"data":function(d){
    				d.sn = $('#deviceSN').val();
    				d.name = $('#deviceName').val();
    				d.treeData = $('#treeData').val();
    				d.pageType = "Switch";//智能开关
        		},
    			"error":function(xhr, textStatus, errorThrown){
    				var msg = xhr.responseText;
    				console.log(msg)
    			}
        	},
        	"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
            "columns": [
                { "data": "iot_id", "defaultContent": ""},
                { "data": "root_group_name", "defaultContent": ""},
                { "data": "name", "defaultContent": ""},
                { "data": "data.sync_state.DEV_SWITCH_STA_1", "defaultContent": ""},
                { "data": "data.sync_state.DEV_SWITCH_STA_2", "defaultContent": ""},
                { "data": "data.sync_state.DEV_SWITCH_STA_3", "defaultContent": ""},
                { "data": "states", "defaultContent": ""},
                {
                    "data": "",
                    "defaultContent": "",
                    "orderable":false,
                    "render": function (data, type, row) {
                        var id = '"' +row['iot_id']+ '"';
                        var html = "<a href='javascript:void(0);' onclick='openIot("+ id + ")'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 开启</a>"
                        html += "<a href='javascript:void(0);' onclick='closeIot("+ id + ")'  class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 关闭</a>"
                        return html;
                    }
                },
            ],
            "order": [[ 1, "desc" ]]
        } );
}
function openIot(id){
    console.log("open==="+id)
    $.ajax({
        url: '/device/updateDeviceStates',
        type: 'GET',
        dataType: 'json',
        data: {
            deviceId: id,
            status: 1
        },
        success: function(res){
            alert("已经打开")
        },
        error: function(res){
            hideLoading()
        }
    });
}

function closeIot(id){
    console.log("close==="+id)
    $.ajax({
        url: '/device/updateDeviceStates',
        type: 'GET',
        dataType: 'json',
        data: {
            deviceId: id,
            status: 0
        },
        success: function(res){
            alert("已经关闭")
        },
        error: function(res){
            hideLoading()
        }
    });
}
$("#searchBt").click(function(){
	example.ajax.reload();
});

$("#addBt").click(function(){
    $.ajax({
        url: '/device/getStatus',
        type: 'GET',
        dataType: 'json',
        beforeSend:function(){
            showLoading()
        },
        success: function(res){
            hideLoading()
         },
        error: function(res){
            hideLoading()
        }
    });
});

        function showLoading(){
            $('#loadingImg').show(500)
        }
        function hideLoading(){
            $('#loadingImg').hide()
        }

init();
</script>

</body>
</html>

